<!-- 商家管理数据 -->
<template>
  <el-table :data="tableData" style="width: 100%" class="business">
    <el-table-column type="expand" >
      <template slot-scope="scope" >
        <el-form
          label-position="left"
          inline
          class="demo-table-expand businessForm"
        >
          <el-form-item label="申请人：">
            <span>{{ scope.row.user.username }}</span>
          </el-form-item>
          <el-form-item label="真实姓名：">
            <span v-if="!scope.row.real_name">暂无</span>
            <span v-else>{{ scope.row.user.real_name }}</span>
          </el-form-item>
          <el-form-item label="申请名称：">
            <span>{{ scope.row.common_name }}</span>
          </el-form-item>
          <el-form-item label="所在单位：">
            <span v-if="!scope.row.user.common_name">暂无</span>
            <span v-else>{{ scope.row.user.common_name }}</span>
          </el-form-item>
          <el-form-item label="学院名：" v-if="scope.row.common_name == 'USER'">
            <span v-if="!scope.row.user.class_name"></span>
            <span v-else>{{ scope.row.user.class_name }}</span>
          </el-form-item>
          <el-form-item label="班级：" v-if="scope.row.common_name == 'USER'">
            <span v-if="!scope.row.user.description">暂无</span>
            <span v-else>{{ scope.row.user.description }}</span>
          </el-form-item>
          <el-form-item label="自我介绍：">
            <span v-if="!scope.row.user.description">暂无</span>
            <span v-else>{{ scope.row.user.description }}</span>
          </el-form-item>
          <el-form-item label="电话号码：">
            <span v-if="!scope.row.user.phone_number">暂无</span>
            <span v-else>{{ scope.row.user.phone_number }}</span>
          </el-form-item>
          <el-form-item label="电子邮箱：">
            <span v-if="!scope.row.user.email">暂无</span>
            <span v-else>{{ scope.row.user.email }}</span>
          </el-form-item>
          <el-form-item label="申请原因：">
            <span>{{ scope.row.apply_reason }}</span>
          </el-form-item>
          <el-form-item label="证件：">
            <img :src="scope.row.license_url" alt="" style="width: 100%" />
          </el-form-item>
        </el-form>
      </template>
    </el-table-column>
    <el-table-column prop="user.username" label="申请人" min-width="120">
    </el-table-column>
    <el-table-column prop="common_name" label="申请名称" min-width="130">
    </el-table-column>
    <el-table-column label="所在单位" min-width="200">
      <template slot-scope="scope">
        <span v-if="!scope.row.user.common_name">暂无</span>
        <span v-else>{{ scope.row.user.common_name }}</span>
      </template>
    </el-table-column>
    <el-table-column label="申请理由" min-width="190">
      <template slot-scope="scope">
        <span style="white-space: nowrap !important">{{
          scope.row.apply_reason
        }}</span>
      </template>
    </el-table-column>
    <el-table-column label="操作" min-width="150">
      <template slot-scope="scope">
        <el-row>
          <el-button
            type="text"
            @click="pass_Firm(scope.row.id, scope.row.common_name)"
            v-if="ispass"
            ><i class="el-icon-key"></i><span>批准</span></el-button
          >
          <el-button
            type="text"
            @click="deny_Firm(scope.row.id)"
            :visible="visible"
            v-if="isdeny"
            ><i class="el-icon-lock"></i><span>驳回</span></el-button
          >
        </el-row>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import { mapState, mapActions, mapMutations, mapGetters } from "vuex";
export default {
  props: {
    visible: Boolean,
    isdeny: Boolean,
    ispass: Boolean,
  },
  data() {
    return {};
  },
  computed: {
    ...mapState("adminBusiness", ["tableData", "page"]),
    ...mapGetters("adminBusiness", ["pageNumber", "pageSize"]),
  },
  methods: {
    ...mapActions("adminBusiness", ["pass", "getData"]),
    ...mapMutations("adminBusiness", ["DENY_FIRM"]),
    //同意申请
    pass_Firm(id, name) {
      this.$confirm(`此操作将批准${name}的申请, 是否继续?`, "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let status = await this["pass"]({ id });
          if (status == 204) {
            this.$message({
              type: "success",
              message: "批准成功!",
            });
            setTimeout(() => {
              this["getData"]({
                page: this["pageNumber"],
                size: this["pageSize"],
              });
            }, 500);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    //驳回申请
    deny_Firm(id) {
      this["DENY_FIRM"]({ id });
      this.$emit("update:visible", true);
    },
  },
};
</script>

<style lang='scss'>
.business {
    margin-top: 10px;
    th>.cell,
    .cell {
        text-align: center;
        .el-table__expand-icon {
            cursor: pointer;
        }
        .el-button {
            padding: 8px 0;
        }
    }
    th {
        background: #f5f7fa;
    }
    td {
        padding: 7px 0;
    }
}

.business ::v-deep .el-table__body {
    .el-form--inline .el-form-item {
        display: block;
        margin: 0;
    }
}

.business ::v-deep .el-table th>.cell,
.business ::v-deep .el-table .cell {
    text-align: center;
    white-space: nowrap !important;
}
.businessForm{
  .el-form-item{
    display: block;
    margin: 0;
  }
}
</style>
